<template>
  <div class="container">
    <my-card>
      <template slot>
        <div class="enterprise-edit-page">
          <el-form ref="form" :model="form" :rules="relus" label-width="140px">
            <el-form-item>
              <div class="item-title-box">基本信息</div>
            </el-form-item>
            <el-form-item label="用户名:" prop="account">
              <el-input v-model="form.account"></el-input>
            </el-form-item>
            <el-form-item label="用户角色:" prop="role">
              <el-select v-model="form.role" placeholder="">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <div class="item-title-box">详细信息</div>
            </el-form-item>
            <el-form-item label="运营人员姓名:" prop="name">
              <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="属于部门:" prop="section">
              <el-select v-model="form.section" placeholder="">
                <el-option
                  v-for="item in sections"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="当前职位:" prop="duty">
              <el-input v-model="form.duty"></el-input>
            </el-form-item>
            <el-form-item label="联系地址:" prop="address">
              <el-input v-model="form.address"></el-input>
            </el-form-item>
            <el-form-item label="手机号码:" prop="phone">
              <el-input v-model="form.phone"></el-input>
            </el-form-item>
            <el-form-item label="邮箱地址:" prop="email">
              <el-input v-model="form.email"></el-input>
            </el-form-item>
            <el-form-item>
              <div class="bottom-btn-box">
                <el-button type="primary" plain @click="hkSubmit"
                  >确定</el-button
                >
                <el-button type="success" plain @click="hkClickEditPwd">
                  修改密码
                </el-button>
                <el-button type="info" plain @click="hkClickBack">
                  取消
                </el-button>
              </div>
            </el-form-item>
          </el-form>
        </div>
      </template>
    </my-card>
  </div>
</template>

<script>
import MyCard from "@/components/my-card/index";
import {
  hkHidLoading,
  hkShowErrorText,
  hkShowLoading,
  hkShowSuccessText,
  isNull,
  accoutnRoles,
  accoutnDutys
} from "@/utils/tools";
import { hkPut } from "@/api/http";
import { httpApi } from "@/api/api";
export default {
  components: { MyCard },
  props: {},
  data() {
    return {
      cacheInfo: {},
      form: {
        phone: "", //电话
        account: "", // 账号
        section: 1, // 部门
        duty: "", // 职位
        email: "", //邮箱
        role: 1, // 账号类型
        name: "", // 名称
        address: "" // 地址
      },
      options: accoutnRoles,
      sections: accoutnDutys,
      relus: {
        phone: [
          {
            required: true,
            message: "请输入手机号",
            trigger: ["blur", "change"]
          }
        ], //电话
        account: [
          {
            required: true,
            message: "请输入用户名",
            trigger: ["blur", "change"]
          }
        ], // 账号
        name: [
          {
            required: true,
            message: "请输入运营人员姓名",
            trigger: ["blur", "change"]
          }
        ] // 名称
      }
    };
  },
  watch: {},
  computed: {},
  methods: {
    hkSubmit() {
      this.$refs.form.validate(valid => {
        if (valid) {
          let params = {};
          for (let key in this.form) {
            if (this.form[key] != this.cacheInfo[key]) {
              params[key] = this.form[key];
            }
          }
          if (isNull(params)) {
            return;
          }
          params.id = this.cacheInfo.id;
          hkShowLoading("修改中....");
          hkPut(httpApi.userBasic, params, false)
            .then(res => {
              hkHidLoading();
              hkShowSuccessText("修改成功!");
              setTimeout(() => {
                this.$router.back();
              }, 1500);
            })
            .catch(err => {
              hkHidLoading();
              hkShowErrorText(err.message);
            });
        } else {
          return false;
        }
      });
    },
    hkClickBack() {
      this.$router.back();
    },
    hkClickEditPwd() {
      this.$router.push({
        path: "/account/ent/pwd",
        query: { id: this.cacheInfo.id }
      });
    }
  },
  created() {},
  mounted() {
    let query = this.$route.query;
    if (isNull(query) && isNull(query.info)) {
      return;
    }
    this.cacheInfo = JSON.parse(decodeURIComponent(query.info));
    // console.log(this.cacheInfo);
    for (const key in this.cacheInfo) {
      if (Object.hasOwnProperty.call(this.cacheInfo, key)) {
        this.form[key] = this.cacheInfo[key];
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.enterprise-edit-page {
  width: 700px;
  margin: 0 auto;
  .item-title-box {
    text-align: center;
  }
  .bottom-btn-box {
    text-align: center;
  }
}
</style>
